import {
  ChangeDetectionStrategy,
  Component,
} from '@angular/core';
import {
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';
import { Entry } from '@core/models';
import { pages } from './routes';

@Component({
  selector: 'app-custom-form-control',
  standalone: true,
  imports: [RouterLinkActive, RouterLink, RouterOutlet],
  template: `
    <div
      role="tablist"
      class="mx-6 mb-4 tabs tabs-bordered"
    >
      @for (demo of demos; track demo.title) {
        <a
          role="tab"
          class="tab"
          [routerLink]="[demo.link]"
          [queryParams]="demo.params"
          [routerLinkActiveOptions]="{ exact: true }"
          [routerLinkActive]="'tab-active'"
        >
          {{ demo.title }}
        </a>
      }
    </div>

    <section class="flex justify-around">
      <span> <router-outlet /> </span>
    </section>
  `,
  styles: `
    :host {
      @apply w-112 block;
    }

    .tab.tab-active:not(.tab-disabled):not([disabled]),
    .tab:is(input:checked) {
      @apply border-b-indigo-600;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomFormControlComponent {
  demos: Entry[] = pages;
}

export default CustomFormControlComponent;
